
$(document).ready(function () {
	
    var imagem = $('#imagem'); 
    imagem.width 	= '150px';
    imagem.height 	= '100';
    imagem.css({
    	width: imagem.width,
    	height: imagem.height
    });
    
    var moldura = $('#moldura');
    moldura.width = '300px';
    moldura.height = '200px';
    moldura.css({
    	width: moldura.width,
    	height: moldura.height
    });
    
    var button = $('#tmpAction');
    
    
    //console.log(imagem.height);
    
    imagem.draggable({
        cursor: 'move',
        stack: '#moldura',
        //delay: 500,
        //grid: [100,100],
        //containment: '#moldura',
        //snap: '#moldura',
        //snapMode: 'inner',
        //snapTolerance: 50,
        stop: function(event, ui) {
        	//console.log(moldura.css('top'));
        	//animate(imagem);
        }
    });
    
    imagem.resizable({
        stop: function(event, ui) {
        	//console.log(event.clientX);
        	//console.log(event.clientY);
        	//console.log(ui.position);
        }
    });
    
    moldura.resizable();
    
    //moldura.droppable({
    	//drop: function(event, ui) {
    	//}
    //});
    
    button.on('click',function() {
    	//imagem.css({
    		//width:'400',
    		//height:'200'
    	//});
    	//console.log(resize(30, 40, 50, 80));
    	var imgW 	= parseInt(imagem.css('width'));
    	var imgH 	= parseInt(imagem.css('height'));
    	var moldW 	= parseInt(moldura.css('width'));
    	var moldH 	= parseInt(moldura.css('height'));
    	dim = resize(imgW, imgH, moldW, moldH);
    	console.log('imgW: %d, imgH: %d; moldW: %d, moldH: %d;',imgW,imgH,moldW,moldH);
    	console.log('finalImg = ', dim);
    	animate(imagem,moldura,dim);
    });
});



function animate(imagem, moldura, dim) {
	imagem.animate({
		//opacity: 0.25,
	    //right: '+=50',
		top: parseInt(moldura.css('top')) + dim.deltaY,
		//top: '120.120px',
		left: parseInt(moldura.css('left')) + dim.deltaX,
		width: dim.x,
	    height: dim.y
	}, 500, function() {
	    // Animation complete.
	});
}


function resize(imgW, imgH, moldW, moldH) {
	
    var ratio; 
    
    // tamanho da imagem final
    var finalImg = {
    	x: 		null,
    	y: 		null,
    	deltaX: null,
    	deltaY: null
    };
    
    //var imgWdiff, imgHdiff;
    
    if (imgW > imgH)
    	ratio = imgH/imgW;
    else
    	ratio = imgW/imgH;
    
    
    
    
    /*
    if (imgW > moldW) {
    	imgWdiff = (imgW - moldW);
    	console.log('width diff' + imgWdiff);
    }
    else {
    	imgWdiff = (moldW - imgW);
    	console.log('width diff' + imgWdiff);
    }
    
    if (imgH > moldH) {
    	imgHdiff = (imgH - moldH);
    	console.log('height diff' + imgHdiff);
    }
    else {
    	imgHdiff = (moldH - imgH);
    	console.log('height diff' + imgHdiff);
    }
    
   if (imgWdiff > imgHdiff) {
	   	console.log('mais largo do que comprido');
		finalImg.y = moldH;
		if (imgW >= imgH) {
			finalImg.x = finalImg.y/ratio;
		}
		else {
			finalImg.x = finalImg.y*ratio;
			//console.log('finalImg.x = ' + finalImg.y + '*' + ratio);
		}
   }
   else {
		finalImg.x = moldW;
		if (imgW >= imgH)
			finalImg.y = finalImg.x*ratio;
		else
			finalImg.y = finalImg.x/ratio;
   }
   */
   
    
    
    
    if (imgW >= moldW) {
    	if (imgH >= moldH) { // bigger
    		if (moldW < moldH) {
        		finalImg.x = moldW;
        		finalImg.y = finalImg.x*ratio;
        	}
        	else {
        		if (imgW > imgH) {
        			finalImg.y = moldH;
        			finalImg.x = finalImg.y*ratio;
        		}
        		else {
        			finalImg.x = moldW; 
        			finalImg.y = finalImg.x*ratio;
        		}
        	}
    	}
    	else {	// widest
    		finalImg.x = moldW;
    		finalImg.y = finalImg.x*ratio;
    	}
    }
    else {
    	if (imgH < moldH) {	// smaller
    		if (moldW < moldH) {
        		if (imgW > imgH) {
        			console.log('entra aqui');
        			finalImg.x = moldW; 
        			finalImg.y = finalImg.x*ratio;
        		}
        		else {
        			finalImg.y = moldH;
        			finalImg.x = finalImg.y*ratio;
        		}
        	}
        	else {
        		if (imgW > imgH) {
        			console.log('here');
        			finalImg.x = moldW; 
        			finalImg.y = finalImg.x*ratio;
        		}
        		else {
        			console.log('there');
        			finalImg.y = moldH;
        			finalImg.x = finalImg.y*ratio;
        		}
        	}
    	}
    	else {	// highest
    		finalImg.y = moldH;
        	finalImg.x = finalImg.y*ratio;
    	}
    }
    
    
    finalImg.deltaX = (moldW - finalImg.x)/2;
    finalImg.deltaY = (moldH - finalImg.y)/2;
    
    return finalImg;
}




function tmp() {
	
}